<template>
  <div class="subcolumn_nav">
    <ul class="ul">
      <li v-for="item in subcolumn_nav" :key="item.id" class="li" :class="column_id==item.id?'active':''">
        <a v-if="item.is_more_column" class="picker-a" :style="{color: column_id===item.id ? app_tabBar.config.thirdcolor : app_tabBar.config.firstcolor}">
          <popup-picker 
          :title="item.name"
          @on-hide="bindPickerChange(item,$event)"
          :data="item.children" 
          v-model="item.value"
          :columns="1"
           >
          </popup-picker>
        </a>
        <a v-else @click="linkTo(item)" :style="{ color: column_id===item.id ? app_tabBar.config.thirdcolor : app_tabBar.config.firstcolor}">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>
<script>
import { PopupPicker  } from 'vux'
import { mapGetters } from 'vuex'
import { navigateToListPage } from '@/utils/index'
export default {
  props: {
    column_id: String
  },
  components: {
    PopupPicker 
  },
  computed: {
    ...mapGetters(['subcolumn_nav','app_tabBar'])
  },
  data() {
    return {}
  },
  methods: {
    bindPickerChange(item,e) {
      if(e){
      const val=item.children[item.value[0]]
      navigateToListPage(val, this)
      }
    },
    linkTo(item) {
      navigateToListPage(item, this)
    }
  }
}
</script>
<style lang="scss" scoped>
.subcolumn_nav {
  background: #fff;
  .ul {
    padding: 10px;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    text-align: center;
    width: 100%;
    .li { flex:1;
      &.active {
        a {
          color: #444;
        }
      }
      a {
        display: block;
        padding: 5px 10px;
        font-size: 16px;
        color: #a6a6a6;
        white-space: nowrap;
        &.picker-a {
          display: flex;
          .picker::after {
            margin-right: 0;
            margin-left: 4px;
            margin-top: -3px;
            display: inline-block;
            width: 0;
            height: 0;
            content: '';
            vertical-align: middle;
            border-top: 4px solid;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
          }
        }
      }
    }
  }
}
</style>
